<template>
	<view>
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
			<uni-popup ref="inputDialog" type="dialog">
				<view class="pickPerson">
					<view class="example">
					<uni-forms ref="form">
						<uni-forms-item label="派单人员" label-width="80px" label-align="right"  name="workPersonId" required >
							<uni-data-select v-model="workPersonId" placeholder="请选择派单人员"  :localdata="workPersonForm"
								@change="change"></uni-data-select>
						</uni-forms-item>

						<!-- <uni-data-select v-model="workPersonId" :localdata="workPersonForm" @change="change"></uni-data-select> -->
						<button @click="confirmPerson">确定</button>
					</uni-forms>
					</view>
				</view>
				<!-- <text>4646</text> -->
				<!-- <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog> -->
			</uni-popup>
			<u-loading-page image="/static/logo.png"></u-loading-page>

			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
			<view class="">
				<uni-search-bar placeholder="请输入要搜索的名称" @confirm="search" :focus="false" v-model="searchValue"
					@blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"></uni-search-bar>
			</view>
			<view class="posChoic" @tap="orderbyChange" :class="{ 'text-theme': hasChoose }">
				<span></span>
				筛选按钮
			</view>
			<fjj-condition ref="condition" @touchmove.stop :color="color" :list="menuList" :defaultValue="defaultValue"
				@result="resultConditon" />

			<!-- 页面内容 -->

			<uni-list>
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item, index) in tableData"
						:right-options="item.state == 1 ? options1 : ''" :key="item.id"
						@change="swipeChange($event, index)" @click="swipeClick($event, item)">
						<uni-list-item :title="item.title" :note="item.createTime" link="navigateTo"
							to="/pages/work/WorkTask/detail" showArrow clickable @click="ToDetail(item)">
							<template v-slot:footer>
								<view class="listRight">
									<uni-tag :inverted="true" :text="priorityData[item.priority - 1].text"
										:type="priorityData[item.priority - 1].type" />
									<text>{{ item.worderClass.typeName }}</text>
								</view>
							</template>
						</uni-list-item>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-list>
		</z-paging>
	</view>
</template>

<script>
	import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
	import {
		getWorkList,
		updateState,
		getWorkclass,
		getallPeople,
		ediotrWordershare
	} from '@/api/system/user.js';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				gridForm: [{
						value: 1,
						title: '待派发'
					},
					{
						value: 2,
						title: '待处理'
					},
					{
						value: 3,
						title: '处理中'
					},
					{
						value: 4,
						title: '待评价'
					},
					{
						value: 5,
						title: '已完结'
					}
				],
				priorityData: [{
						text: '次要',
						value: 1,
						type: 'primary'
					},
					{
						text: '普通',
						value: 2,
						type: 'warning'
					},
					{
						text: '紧急',
						value: 3,
						type: 'error'
					}
				],
				options1: [{
					text: '派单',
					style: {
						backgroundColor: '#007aff'
					}
				}],
				cover: 'http://116.148.228.110:9000/Upload/covers/20240204/20240204_170721_7458_199%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240204170518.png',
				cardTitle: '待派发',
				Wstate: '',
				UserId: '',
				Wdata: '', //总数据
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				StateData1: [],
				StateData2: [],
				StateData3: [],
				StateData5: [],
				CardData: '',
				current: '',
				searchValue: '',
				choiceDetail: '',
				cusData: '',
				searchData: [],
				orderClass: '',
				dataRange: {},
				orderClassData: [{
						title: '多选选项1',
						value: '1',
						isSelected: true
					},
					{
						title: '多选选项2',
						value: '2'
					},
					{
						title: '多选选项3',
						value: '3'
					}
				],
				color: '#4D7BFE',
				hasChoose: false,
				menuList: [],
				defaultValue: {},
				workPersonForm: '', //人员信息
				workPersonId: '',
				editorId: '',
				msgType: '', //消息提示框类型
				messageText: '' //消息提示框内容
				// OrderStatus: ''
			};
		},
		onLoad() {
			this.getmyWorktodo();
			setTimeout(() => {
				this.menuList = [{
						title: '工单状态',
						type: 'custom',
						key: 'custom2',
						isMutiple: false, //多选
						detailList: this.gridForm
					},
					{
						title: '工单类型多选',
						type: 'custom',
						key: 'custom1',
						isMutiple: true, //多选
						detailList: this.orderClassData
					},
					{
						title: '日期范围',
						type: 'range',
						key: 'time1',
						minName: 'time1MinName',
						maxName: 'time1MaxName'
					}
				];
				this.defaultValue = {
					// custom1: ['1', '2'],
					// time1: ['2021/02/01', '2021/02/03']
				};
			}, 2000);
		},
		// onLoad() {
		// 	this.getmyWorktodo();
		// },
		methods: {
			// 下拉刷新被触发
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					this.getmyWorktodo();
					// 1.5秒之后停止刷新动画
					this.$refs.paging.complete();
				}, 888);
			},
			getmyWorktodo(pageCurrent) {
				this.loading = true;
				this.pageCurrent = pageCurrent;
				const that = this;
				getWorkclass().then((res) => {
					that.orderClass = res.data.filter((item) => item.pId > 0);
					// that.orderClass = res.rows;
					that.orderClassData = that.orderClass.map((b) => {
						return {
							title: b.typeName,
							value: b.typeId
						};
						// that.orderClassData.title = b.typeName;
						// that.orderClassData.value = b.typeId;
					});
					// console.log('orderClassData', that.orderClassData);
				});
				getWorkList('1', '10000', that.Wstate, that.dataRange).then((res) => {
					// console.log(res.rows);
					that.cusData = res.rows;
					// that.cusData.map((t) => {
					// 	that.orderClass.map((b) => {
					// 		t.worderClass.
					// 	})
					// })
					that.tableData = that.cusData;
					that.total = res.total;
					that.loading = false;
				});
			},
			change(e) {
				// this.$refs.table.clearSelection();
				// this.selectedIndexs.length = 0;
				// console.log('e.current:', e.current);
				this.getmyWorktodo(e.current);
			},
			// WDistribution(state) {
			// 	console.log('state', state);
			// 	this.Wstate = state;
			// 	this.getmyWorktodo();
			// 	this.pageCurrent = 1;
			// },
			ToDetail(b) {
				// this.$tab.navigateTo('/pages/work/WorkTask/detail');
				store.state.CusImform = b;
				console.log('store.state.CusImform:', store.state.CusImform);
			},
			search(res) {
				// console.log(res);
				var that = this;
				that.searchData = [];
				that.tableData.map((t) => {
					if (t.title.indexOf(res.value) > -1) {
						that.searchData.push(t);
						// console.log('t.title:', t.title);
					}
				});
				that.tableData = that.searchData;
				// uni.showToast({
				// 	title: '搜索：' + res.value,
				// 	icon: 'none'
				// });
			},
			input(res) {
				this.tableData = this.cusData;
				// console.log('----input:', that.searchData);
			},
			clear(res) {
				this.tableData = this.cusData;
				// uni.showToast({
				// 	title: 'clear事件，清除值为：' + res.value,
				// 	icon: 'none'
				// });
			},
			blur(res) {
				// uni.showToast({
				// 	title: 'blur事件，输入值为：' + res.value,
				// 	icon: 'none'
				// });
			},
			focus(e) {
				// uni.showToast({
				// 	title: 'focus事件，输出值为：' + e.value,
				// 	icon: 'none'
				// });
			},
			cancel(res) {
				this.tableData = this.cusData;
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// });
			},
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
				console.log(obj);
				if (obj.result.time1) {
					this.dataRange['beginTime'] = obj.result.time1[0];
					this.dataRange['endTime'] = obj.result.time1[1];
					this.getmyWorktodo();
				}
				if (obj.result.custom2) {
					this.Wstate = obj.result.custom2;
					this.getmyWorktodo();
				} else {
					this.Wstate = '';
					this.getmyWorktodo();
				}

				// console.log(this.dataRange);
				this.choiceDetail = [];
				setTimeout(() => {
					if (obj.result.custom1 == '') {
						this.tableData = this.cusData;
					} else {
						obj.result.custom1.map((id) => {
							this.tableData.map((item) => {
								if (id == item.worderClass.typeId) {
									this.choiceDetail.push(item);
								}
							});
						});

						// console.log('choiceDetail', this.choiceDetail);
						this.tableData = this.choiceDetail;
					}
				}, 500);
			},
			orderbyChange(obj) {
				// this.tableData = this.cusData;
				this.$refs.condition.visibleDrawer = true;
			},
			swipeChange(e, index) {
				// console.log('返回：', e);
				// console.log('当前索引：', index);
			},
			async swipeClick(e, item) {
				let {
					content
				} = e;
				if (content.text === '派单') {
					this.editorId = item.id;
					await getallPeople(item.parentId).then((res) => {
						this.workPersonForm = res.data.map((item) => {
							return {
								value: item.userId,
								text: item.userName
							};
						});
					});
					this.$refs.inputDialog.open();
				}
			},
			confirmPerson() {
				if (this.workPersonId){
					let data = {
						id: this.editorId,
						serviceId: this.workPersonId,
						state: 2
					};
					ediotrWordershare(data).then((res) => {
						if (res.code == 200) {
							this.$refs.inputDialog.close();
							this.msgType = 'success';
							this.messageText = `派单成功!`;
							this.$refs.message.open();
							this.getmyWorktodo();
						}
						// console.log(res);
					});
					console.log('data', data);
				}else{
					this.msgType = 'error';
					this.messageText = `必填项不得为空`;
					this.$refs.message.open();
					console.log('内容缺失');
				}
				
			}
		}
	};
</script>

<style lang="scss">
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.uni-grid {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row;
	}

	/* .uni-list {
	align-items: center;
	height: 50px;
} */
	.btnOrder {
		height: 50%;
	}

	.posChoic {
		position: absolute;
		top: 0;
		right: 0;
	}

	.uni-section {
		position: relative;
	}

	.pickPerson {
		background: #fff;
		width: 300px;
		height: 250px;
		border-radius: 10px;
	}

	.listRight {
		width: 270rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>